<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Arcs</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var values = {
			points: 20,
			radius: 20,
			initialRadius: 10
		};
		for (var i = 0; i < 30; i++) {
			var path = new Path({
				fillColor: i % 2 ? 'red' : 'black',
				closed: true
			});

			var point = new Point({
				length: values.initialRadius + values.radius * i,
				angle: 0
			});
			for (var j = 0; j <= values.points; j++) {
				point.angle += 360 / values.points;
				if (j == 0) {
					path.add(view.center + point);
				} else {
					path.arcTo(view.center + point);
				}
			}
			project.activeLayer.insertChild(0, path);
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
</body>
</html>
